<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* body {
      margin: 0;
      padding: 0;
    } */
    /* vw相对于视窗的宽度; 1vw==1%  10vw==10% 常用vw
       vh相对于视窗的高度; 1vh==1%  10vh==10%
    */
    .box {
      width: 10vw;
      height: 10vh;
      background-color: #373d41;
    }
    /* 
      ■像素单位常见的有三种像素名称：
        口设备像素(也称之为物理像素);
          口设备像素指的是显示器上的真实像素，每个像素的大小是屏幕固有的属性，屏幕出厂以后就不会改变了；
          口我们在购买显示器或者手机的时候，提到的设备分辨率就是设备像素的大小；
          口比如iPhone X的分辨率1125x2436,指的就是设备像素；

        口设备独立像素(也称之为逻辑像素);
          口如果面向开发者我们使用设备像素显示一个100px的宽度，那么在不同屏幕上显示效果会是不同的；
          口开发者针对不同的屏幕很难进行较好的适配，编写程序必须了解用户的分辨率来进行开发；
          口所以在设备像素之上，操作系统为开发者进行抽象，提供了逻辑像素的概念；
          口比如你购买了一台显示器，在操作系统上是以1920×1080设置的显示分辨率，
            那么无论你购买的是2k、4k的显示器，对于开发者来说，都是1920x1080的大小。

        口CSS像素；
          口CSS中我们经常使用的单位也是pixel,它在默认情况下等同于设备独立像素(也就是逻辑像素);
          口毕竟逻辑像素才是面向我们开发者的；

        ■可以通过JavaScript中的screen.width和screen.height获取到电脑的逻辑分辨率：

      ■ DPR:device pixel ratio
        口2010年，iPhone4问世，不仅仅带来了移动互联网，还带来了Retina屏幕；
        口Retina屏幕翻译为视网膜显示屏，可以为用户带来更好的显示；
        口在Retina屏幕中，一个逻辑像素在长度上对应两个物理像素，
          这个比例称之为设备像素比(device pixel ratio);
        口我们可以通过window.devicePixelRatio获取到当前屏幕上的DPR值；
        口在Retina屏幕中，1个CSS像素对应2个物理像素；(更高的DPR值，意味着更高的屏幕分辨率。1：3)
        口在非Retina屏幕中，1个CSS像素对应1个物理像素；

      ■ PPI(了解):每英寸像素(英语：Pixels Per Inch,缩写：PPI)
        口通常用来表示一个打印图像或者显示器上像素的密度；
        口前面我们提过1英寸=2.54厘米，在工业领域被广泛应用；
        1英寸->2.54厘米->大约96px 非Retina屏幕（CSS逻辑像素）
        1英寸->2.54厘米->192px Retina屏幕
        口PPI值越大，屏幕的分辨率越高；例242PPI 每英寸242个像素点；
    */
  </style>
</head>
<body>
  
  <div class="box"></div>

</body>
</html>